<template>
<!-- data rows -->
<table id="{{ tableId }}" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th v-for="key in columns" 
                data-column-id="{{key}}"
                data-visible="{{ key | visibleColumn }}"
                >{{key | lang }}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="project in data">
            <td v-for="key in columns">
                {{ project[key] | processField key project }}
            </td>
        </tr>
    </tbody>
</table>
<!-- End data rows -->
</template>
<script>
    
    export default {

        props :['columns','tableId','data'],
        data () {
            let defaultDisplayColumn = [
                'name',
                'project_no',
                'status'
            ];
            return {
                defaultDisplayColumn
            }
        },

        filters : {
            lang (key) {
                return Lang.get('project.table.'+key);
            },
            visibleColumn (columnName) {
                return ""+_.includes(this.defaultDisplayColumn,columnName);
            },
            processField (value, key, row) {
                if(key == 'name'){
                    return `<a href="/project/${row.ID || row.id}">${value}</a>`;
                }

                return value;

            }
        },
        ready (){
            $(`#${this.tableId}`).bootgrid({
                                caseSensitive: false,
                                css: {
                                    icon: 'zmdi icon',
                                    iconColumns: 'zmdi-view-module',
                                    iconDown: 'zmdi-sort-desc',
                                    iconRefresh: 'zmdi-refresh',
                                    iconUp: 'zmdi-sort-asc',
                                    dropDownMenuItems:'dropdown-menu'
                                },
                                formatters: {
                                    name (column,row) {
                                        return "heihei ";
                                    }
                                }
                            });
        }

    }
</script>